<!-- 病患分布详情弹窗 -->
<template>
  <div class="PopMemberDetail-wrap">
    <div class="pop-inner">
      <div class="pop-head">
        <div class="tit">病患详情</div>
        <div class="close" @click="closePanel">×</div>
      </div>
      <div class="pop-body">
        <div class="list" v-if="datas">
          <div class="item">
            <div class="lb">姓名：</div>
            <div class="rb" :title="datas.patientName">{{datas.patientName}}</div>
          </div>
          <div class="item">
            <div class="lb">性别：</div>
            <div class="rb" :title="datas.patientSex">{{datas.patientSex}}</div>
          </div>
          <div class="item">
            <div class="lb">类型：</div>
            <div class="rb" :title="datas.patientType">{{datas.patientType}}</div>
          </div>
          <div class="item">
            <div class="lb">年龄：</div>
            <div class="rb" :title="datas.patientAge">{{datas.patientAge}}</div>
          </div>
          <div class="item">
            <div class="lb">身份证号：</div>
            <div class="rb" :title="datas.identityCard">{{datas.identityCard}}</div>
          </div>
          <div class="item">
            <div class="lb">联系方式：</div>
            <div class="rb" :title="datas.contactInfo">{{datas.contactInfo}}</div>
          </div>
          <div class="item">
            <div class="lb">工作单位：</div>
            <div class="rb" :title="datas.workUnit">{{datas.workUnit}}</div>
          </div>
          <div class="item">
            <div class="lb">居住小区：</div>
            <div class="rb" :title="datas.liveAddress">{{datas.liveAddress}}</div>
          </div>
          <div class="item">
            <div class="lb">外来时间：</div>
            <div class="rb" :title="datas.comeDate">{{datas.comeDate}}</div>
          </div>
          <div class="item">
            <div class="lb">学校信息：</div>
            <div class="rb" :title="datas.school">{{datas.school}}</div>
          </div>
          <div class="item">
            <div class="lb">采取措施：</div>
            <div class="rb" :title="datas.takeMeasures">{{datas.takeMeasures}}</div>
          </div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
  import moment from 'moment';

  @Component({
    name: 'PopMemberDetail',
    components: {},
  })
  export default class PopMemberDetail extends Vue {
    @Prop() private datas?: any;
    @Emit()
    private closePanel() {
      return false;
    }
    private closePop() {
      this.closePanel();
    }
  }
</script>
<style lang="less" scoped>
  .PopMemberDetail-wrap{
    position: absolute;
    left: calc(100% + 20px);
    top: 0;
    .pop-inner {
      width: 413px;
      height: 414px;
      background: url('../../assets/img/panel/gisUI/pop-inner_bg.png') no-repeat 0 0;
      background-size: 100% 100%;
      padding: 20px;
      .pop-head{
        padding: 17px 15px;
      }
      .pop-body{
        padding: 10px;
        height: calc(100% - 54px);
        .list{
          padding: 0 20px;
          .item{
            display: flex;
            min-width: 0;
            font-size: 18px;
            color: #c2e7f2;
            margin-top: 5px;
            .lb{
              text-align-last: justify;
              text-align: justify;
              width: 90px;
              min-width: 90px;
              margin-right: 5px;
            }
            .rb{
              overflow: hidden;
              white-space: nowrap;
              text-overflow:ellipsis;
            }
          }
        }
      }
    }
  }
</style>
